<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <child-component @add="parentAdd"></child-component>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{count:0},
            //然后，在父组件中，我们需要监听子组件触发的这个自定义事件，并在事件处理函数中接收传递过来的数据。
            methods:{
                parentAdd(amount){
                    this.count += amount;
                }
            },
            components:{
                ChildComponent:{
                    methods:{
                        childAdd(amount){
                            //子组件中我们需要使用 $emit 方法触发一个自定义事件，
                            //并且可以将需要传递的数据作为该事件的参数。
                            this.$emit('add',amount);
                        }
                    },
                    template:`<div><button @click="childAdd(5)">+</button></div>`
                }
            }
        });
    </script>
</body>
</html>